<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--admin page-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Url shorten app</title>

<!--    import jquery, bootstrap and datatable source by cdn-->
    <script th:src="@{https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js}"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">``
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

    <style>
        @media (min-width: 1650px) {
            .container {
                width: 1200px;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <br>
    <h1 style="font-size: x-large;" align="center">短链接地址一览</h1><br>
    <br>
    <div class="row" th:if="${session.user}">
        <div class="col-xs-12 col-md-12" align="right">
            <a id="refresh" class="btn btn-primary" href="javascript:void(0);">刷新</a> &nbsp;
            <a class="btn btn-info" href="/logout">登出</a>
        </div>
    </div>
    <br>

    <div>
        <main>
            <div class="container-fluid px-4">
                <div class="card mb-4">
                    <div class="card-body">
                        <table id="url_table" class="table table-bordered no-footer dataTable">
                            <thead>
                            <tr>
                                <th>用户名</th>
                                <th>原链接</th>
                                <th>短链接</th>
                                <th>访问人数</th>
                                <th>最后访问</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <nav aria-label="Page navigation example" th:align="centre">
                            <ul class="pagination" style="margin-left: 440px ; margin-top: 20px">
<!--                                <li class="page-item" id="prevButton">-->
<!--                                    <a class="page-link" href="#" aria-label="Previous">-->
<!--                                        <span aria-hidden="true">&laquo;</span>-->
<!--                                    </a>-->
<!--                                </li>-->
<!--                                <li class="page-item"><a class="page-link" href="#">1</a></li>-->
<!--                                <li class="page-item"><a class="page-link" href="#">2</a></li>-->
<!--                                <li class="page-item"><a class="page-link" href="#">3</a></li>-->

<!--                                <li class="page-item">-->
<!--                                    <a class="page-link" href="#" aria-label="Next">-->
<!--                                        <span aria-hidden="true">&raquo;</span>-->
<!--                                    </a>-->
<!--                                </li>-->
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <input type="hidden" id="page" value="1">
    <input type="hidden" id="max" >
</div>

<script>
    $(function () {
        console.log(123)
        load();
        function load(){
            var temp = $("#page").val()
            $.ajax({
                url:"/admin",
                method:"GET",
                data:{pageId:temp},
                success:function (res) {
                    console.log(res.data)
                    console.log(res.data.pages)
                    console.log(res.data.urlIPage.records)
                    for (let i = 0; i < res.data.urlIPage.records.length; i++) {
                        var tr = $("<tr></tr>")
                        var username =$("<td>"+res.data.urlIPage.records[i].username+"</td>")
                        var originUrl = $("<td>"+res.data.urlIPage.records[i].originUrl+"</td>")
                        var shortUrl = $("<td>"+window.location.protocol+window.location.host+"/"+"/"+res.data.urlIPage.records[i].separate+"/"+res.data.urlIPage.records[i].shortUrlId+"</td>")
                        var visits = $("<td>"+res.data.urlIPage.records[i].visits+"</td>")
                        if (res.data.urlIPage.records[i].lastVisit == null){
                            var lastVisit = $("<td>暂无访问记录</td>")
                        }else {
                            var lastVisit = $("<td>"+res.data.urlIPage.records[i].lastVisit+"</td>")
                        }
                        tr.append(username,originUrl,shortUrl,visits,lastVisit);
                        $("#url_table tbody").append(tr);
                    }
                    console.log("加载页码")

                    var prevPage =res.data.currentPage-1
                    var prev = $("    <li class=\"page-item\" id=\"prevButton\" value="+prevPage+">\n" +
                        "                                    <a class=\"page-link\" href=\"#\" aria-label=\"Previous\">\n" +
                        "                                        <span aria-hidden=\"true\">&laquo;</span>\n" +
                        "                                    </a>\n" +
                        "                                </li>")
                    $(".pagination ").append(prev)
                    var maxPage =res.data.currentPage+1
                    var next =$("         <li class=\"page-item\" value="+maxPage+">\n" +
                        "                                    <a class=\"page-link\" href=\"#\" aria-label=\"Next\">\n" +
                        "                                        <span aria-hidden=\"true\" >&raquo;</span>\n" +
                        "                                    </a>\n" +
                        "                                </li>")
                    var last =  $("<span style='text-align: center;font-size: 20px;font-family: 'Arial Black''>&nbsp;&nbsp;当前第"+res.data.currentPage*5+"条,一共"+res.data.total +" 条数据</span>")
                    $("#max").val(res.data.pages);
                    for (let i = 1; i <= res.data.pages; i++) {
                        $(".pagination ").append("<li class='page-item ' value="+i+"><a class=\"page-link\" href=\"#\">"+i+"</a></li>")
                        if(res.data.currentPage == i){
                            console.log($(".pagination li").eq(i))
                            $(".pagination li").eq(i).addClass("active")
                            $(".pagination li").eq(i).prop("background","blue")
                            $(".pagination li").eq(i).siblings().removeClass("active")
                        }
                    }
                    $(".pagination ").append(next);
                    $(".pagination ").append(last);
                }
            })
        }

        $(".pagination ").on("click","li ",function () {
            // var pageId = $(this).text()
            var pageId = $(this).val()
            var max = $("#max").val()
            console.log("最大页数"+max)
            if (pageId==0){
                alert("前面没有数据了")
            }else if (pageId>max){
                alert("已经是最后一页了")
            }else {
                $("#page").val(pageId)
                console.log("点击页码"+pageId)
                $("#url_table tbody").empty();
                $(".pagination").empty()
                console.log("重新加载")
                load();
            }
        })

        $("#refresh").click(function () {
            $("#url_table tbody").empty();
            $(".pagination").empty()
            load();
        })

    })
</script>
</body>
</html>